var modTable_locLang = new localLang("modTable");
var modTable = new Class({
	Extends:WFWindow, 
	sampleProxyEnable: true,
	options: {
        name: 'modTable',
        title: modTable_locLang.label('title'),
        btnSettings: true,
        btnRefresh: true,
        btnHelp: true,
        btnClose: true,
        loadCSS: true,
		supportServerTypes:['modSimple']      
    },
    
    includeScript:['ball.js'], 
	
    renderContent:function(){
		this.rootDiv = new Element('div', {'id':'rootDiv'}).inject(this.boxBD);
			this.canvas = new Element('canvas', {'id':'canvas'}).inject(this.rootDiv);
			this.chartBox = new Element('div', {'class':'container'}).injectInside(this.rootDiv);
		
        this.width = this.rootDiv.getSize().x;
        this.height = 300;
        
        if(this.maxTimerCounter == 0){
            this.displayChart();
        }else{
            this.counter = 0;
            this.timer = this.displayChart.periodical(3000, this);
			this.displayChart();
        }
	
		this.ball2 = new BallMove(100, 100, 10, 10);
		this.ball2.start();
		
		this.timer = this.ballSendData.periodical(100, this);
		this.ballSendData();
    },
	
	ballSendData:function(){
		//var data = "module=modSimple&serverid=1&url="+encodeURIComponent(this.widgetPath+'/sampleReporting.php?x='+ballObj.getX()+'&y='ballObj.getY())+'&pool_id=displayChart'+this.id;
		var data = "module=modSimple&serverid=1&url="+encodeURIComponent(this.widgetPath+'/controler/updateData.php?x='+this.ball2.getX()+'&y='+this.ball2.getY())+'&pool_id=displayChart'+this.id;
		this.proxyRequest(data,this.ballDataStatus.bind(this),this.displayFailure.bind(this));
	}, 
	
	ballDataStatus:function(response)
	{
		//alert(response);
	}, 
	
	displayChart:function(){
        if(this.maxTimerCounter != 0){
            this.counter++;
            if(this.counter > 0 && this.counter == this.maxTimerCounter){
                clearInterval(this.timer);
            }
        }
		var data = "module=modSimple&serverid=1&url="+encodeURIComponent(this.widgetPath+'/controler/getData.php?fakename=fake.json')+'&pool_id=displayChart'+this.id;
		this.proxyRequest(data,this.displaySuccess.bind(this),this.displayFailure.bind(this));
    },
	
    displaySuccess: function(response)
	{
		//alert(response);
		this.chart_data = JSON.decode(response); 
        this.renderChart(this.width, this.height);
        window.fireEvent('widget_load', this.widgetInfo);
    },

    displayFailure: function(){
		alert("failed");
    },
    onContentresize: function(event){
        if (this.myChart){
            var xy = this.getContentSize();
            //this.myChart.setSize(xy.x, xy.y-this.errormsg.getSize().y, false);
        }
    },
    renderChart: function(x, y)
	{
        if(this.myChart && this.myChart.destroy){
            this.myChart.destroy();
            this.myChart = null;
            if (typeof(CollectGarbage) === 'function'){
                CollectGarbage();
            }
        }

		if(this.chart_data != null)
		{
			// >>>>>>> Highcharts Step 3 : define your chart json,
			// render chart will only create on the first load, 
			// after that any resize behavior will call refreshMod() API
			this.myChart = new Highcharts.Chart({
				
		         chart: {
		             renderTo: this.chartBox,
		             type: 'line',
		 			 width: x,
		 			 height: y
		 		  },
		 		  title: {
			    	text : ''
				  },
		 		  xAxis: {
		 			 categories: ['1', '2', '3', '4', '5', '6',
		 				'7', '8', '9', '10', '11', '12', '13', '14', '15', '16', 
						'17', '18', '19', '20'],
	 				 labels: {
	 					 step: 5
    	             }
		 		  },
		 		  yAxis: {
		 			  title: {
		 				  text: 'Temperature (?°C)'
		 			  },
		 			  plotLines: [{
		 				  value: 0,
		 				  width: 1,
		 				  color: '#808080'
		 			  }]
		 		  },
		 		  tooltip: {
		 			  formatter: function() {
		 					  return '<b>'+ this.series.name +'</b><br/>'+
		 					  this.x +': '+ this.y +'?°C';
		 			  }
		 		  },
		          series: this.chart_data
		       });
		}
    },
})